<template>
  <div class="container">
    <div class="table-container">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column prop="brand" label="商标" width="112">
          <template slot-scope="scope">
            <img :src="scope.row.brand" width="100" height="100" class="cover"/>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="公司名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="size"
            label="公司规模"
            width="120">
        </el-table-column>
        <el-table-column prop="license" label="营业执照" width="150">
          <template slot-scope="scope">
            <img :src="scope.row.license" width="120" height="100" class="cover"/>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="审核"
            width="100">
          <template slot-scope="scope">
            <el-button @click="open(scope.row)" type="text" size="small">通过</el-button>
            <el-button type="text" size="small">拒绝</el-button>
          </template>
        </el-table-column>
        <el-table-column
            prop="description"
            label="公司描述"
            width=630>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="totalPages"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
          style="height: 83px"
      ></el-pagination>
    </div>
    <el-dialog
        title="审核成功"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <span>已往该公司邮箱{{this.companyEamil}}发送<br>
        账号:{{this.generatedAccount}}<br>
        密码:{{this.generatedPassword}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="sentEamilANDinsert">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>


<script>
import axios from "axios";

export default {
  data() {
    return {
      generatedAccount: '', // 用于存储生成的账号
      generatedPassword: '', // 用于存储生成的账号密码
      companyEamil: '',
      companyId: '',
      dialogVisible: false,
      tableData: [],
      currentPage: 1,
      pageSize: 4,
      totalPages: 100
    }
  },
  methods: {
    sentEamilANDinsert() {
      axios.get(`/api/company/sentAccountAndPassword/${this.companyId}/${this.generatedAccount}/${this.generatedPassword}`).then(resp => {
        console.log(resp.data)
      }).catch(err => {
        console.log(err)
      })
      axios.post(`/api/remoteEmail/sendEmail`, {
        title: "公司通过审核",
        text: `账号:${this.generatedAccount}<br>password:${this.generatedPassword}`,
        receive: this.companyEamil
      }).then(resp => {
        console.log(resp.data)
      }).catch(err => {
        console.log(err)
      })
      axios.get(`/api/company/${this.companyId}/1`).then(resp => {
        this.fetchTableData();
      }).catch(err => {
        this.fetchTableData();
      })
      this.dialogVisible = false;
    },
    generateAccountAndPassword() {
      // 生成账号
      const accountNumberPart = Math.floor(10000 + Math.random() * 90000);
      this.generatedAccount = `company${accountNumberPart}`;

      // 生成密码
      let password = '';
      for (let i = 0; i < 12; i++) {
        password += Math.floor(Math.random() * 10);
      }
      this.generatedPassword = password;
    },
    fetchTableData() {
      axios.get('/api/company/auditCompany').then(resp => {
        console.log(resp.data);
        const allData = resp.data;
        console.log(allData.length)
        this.totalPages = 7;
        const startIndex = (this.currentPage - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        this.tableData = allData.slice(startIndex, endIndex);
      }).catch(error => {
        console.error("获取公司数据出错：", error);
      });
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchTableData();
    },
    handleClick(row) {
      axios.get(`/api/company/${row.id}/1`).then(resp => {
        this.fetchTableData();
      }).catch(err => {
        this.fetchTableData();
      })
    },
    open(row) {
      this.$confirm('确定要通过该公司?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        //this.handleClick(row)
        this.dialogVisible = true;
        this.companyEamil = row.email;
        this.companyId = row.id;
        this.generateAccountAndPassword();
        /*        this.$message({
                  type: 'success',
                  message: '审核成功!'
                });*/
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消审核'
        });
      });
    }
  },
  mounted() {
    this.fetchTableData();
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.table-container {
  flex: 1;
  overflow: auto;
}

.pagination-container {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
</style>
